<script setup lang="ts">
defineOptions({
  name: "NodeAdd",
  inheritAttrs: false,
});

const emits = defineEmits(["handleQuery"]);

import { addMenu, updateMenu, getMenuOptions, getMenuForm } from "@/api/menu";
import { MenuForm } from "@/api/menu/types";

import IconSelect from "@/components/IconSelect/index.vue";
const dialog = reactive({
  title: "",
  visible: false,
});

const menuOptions = ref<OptionItem[]>([]);

const menuFormRef = ref(ElForm);

const formData = reactive<MenuForm>({
  id: 0,
  parent_id: 0,
  name: "",
  title: "",
  path: "",
  component: "",
  hidden: 0,
  sort: 1,
  always: 0,
  keep_alive: 0,
  type: 1,
  status: 1,
  perm: "",
});

const rules = reactive({
  parent_id: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
});

const showDialog = (id?: number) => {
  dialog.visible = true;
  if (id) {
    dialog.title = "修改菜单";
    getMenuForm(id).then(({ data }) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增菜单";
    resetForm();
  }

  getMenuOptions().then(({ data }) => {
    menuOptions.value = [{ id: 0, title: "顶级菜单", children: data }];
  });
};
defineExpose({ showDialog });

/** 关闭弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/** 菜单保存提交 */
function submitForm() {
  menuFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      const menuId = formData.id;
      if (menuId) {
        updateMenu(menuId, formData).then(() => {
          ElMessage.success("修改成功");
          closeDialog();
          emits("handleQuery");
        });
      } else {
        addMenu(formData).then(() => {
          ElMessage.success("新增成功");
          closeDialog();
          emits("handleQuery");
        });
      }
    }
  });
}

/** 重置表单 */
function resetForm() {
  if (!menuFormRef.value) {
    // 执行nextTick
    nextTick(() => {
      menuFormRef.value.resetFields();
      menuFormRef.value.clearValidate();
    });
  }

  formData.id = undefined;
  formData.parent_id = 0;
  formData.hidden = 0;
  formData.status = 1;
  formData.sort = 1;
  formData.component = "";
  formData.path = "";
  formData.redirect = "";
  formData.always = 0;
  formData.keep_alive = 1;
  formData.perm = "";
}
</script>

<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    destroy-on-close
    append-to-body
    width="1000px"
    @close="closeDialog"
    top="5vh"
  >
    <el-form
      ref="menuFormRef"
      :model="formData"
      :rules="rules"
      label-width="160px"
    >
      <el-form-item label="父级菜单" prop="parentId">
        <el-tree-select
          v-model="formData.parent_id"
          placeholder="选择上级菜单"
          :data="menuOptions"
          filterable
          check-strictly
          value-key="id"
          :props="{
            label: 'title',
            children: 'children',
            isLeaf: 'isLeaf',
          }"
          :render-after-expand="false"
        />
      </el-form-item>

      <el-form-item label="菜单标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入菜单标题" />
      </el-form-item>

      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入菜单名称" />
      </el-form-item>

      <el-form-item label="路由路径" prop="path">
        <el-input v-model="formData.path" placeholder="请输入路由路径" />
      </el-form-item>

      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">目录</el-radio>
          <el-radio :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 组件页面完整路径 -->
      <el-form-item v-if="formData.type == 1" label="页面路径" prop="component">
        <el-input
          v-model="formData.component"
          placeholder="system/user/index"
          style="width: 95%"
        >
          <template v-if="formData.type == 1" #prepend>src/views/</template>
          <template v-if="formData.type == 1" #append>.vue</template>
        </el-input>
      </el-form-item>

      <el-form-item prop="hidden" label="显示状态">
        <el-radio-group v-model="formData.hidden">
          <el-radio :label="1">隐藏</el-radio>
          <el-radio :label="0">显示</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.type === 1" label="是否缓存">
        <el-radio-group v-model="formData.keep_alive">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          style="width: 100px"
          controls-position="right"
          :min="0"
        />
      </el-form-item>

      <el-form-item prop="status" label="使用状态">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">使用中</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 权限标识 -->
      <el-form-item v-if="formData.type == 3" label="权限标识" prop="perm">
        <el-input v-model="formData.perm" placeholder="sys:user:add" />
      </el-form-item>

      <el-form-item label="图标" prop="icon">
        <!-- 图标选择器 -->
        <icon-select v-model="formData.icon" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
